<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>THREE.BAS Examples</title>

  <style>
    body {
      margin: 0;
      font-family: monospace;
    }
    p, h2 {
      margin: 0;
      padding: 0;
    }
    .content {
      margin: 20px;
    }
    .content a {
      display: block;
      margin: 6px 0;
      text-decoration: none;
    }
    .footer {
      margin: 20px;
    }
    .footer a {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div class="content">
    <h2>Basics / Features</h2>
    <a href="examples/basic_transform">Transform / Annotated Source</a>
    <a href="examples/bezier_curve">Cubic Bezier Path</a>
    <a href="examples/spline">Catmull Rom Spline</a>
    <a href="examples/easing">Easing Functions</a>
    <a href="examples/easing_bezier">Bezier Easing</a>
    <a href="examples/model_face_animation">Model Face Animation</a>
    <a href="examples/shadows">Shadow Materials</a>
    <a href="examples/materials_basic">Material Test - Basic</a>
    <a href="examples/materials_phong">Material Test - Phong</a>
    <a href="examples/materials_standard">Material Test - Standard</a>
  </div>
  <div class="content">
    <h2>Advanced / Showcase</h2>
    <a href="examples/crystal_triangles">Crystal Triangles</a>
    <a href="examples/audio_visual">Audio Visualiser</a>
    <a href="examples/image_transition">Image Transition</a>
    <a href="examples/motion_smear">Motion Smear</a>
  </div>
  <div class="content">
    <h2>Timeline</h2>
    <a href="examples/timeline_1">Many Boxes</a>
    <a href="examples/timeline_2">Many Boxes 2</a>
    <a href="examples/timeline_3">Many Spikes</a>
  </div>
  <div class="footer">
    <a href="https://github.com/zadvorsky/three.bas">Source</a> | <a href="docs/gen">Documentation</a> | <a href="https://github.com/zadvorsky/three.bas/wiki">Wiki</a> | <a href="https://twitter.com/zadvorsky">@zadvorsky</a>
  </div>
</body>
</html>
